<template>
  <div class="pro_div">
    <div class="img_top">
      <img :src="back_img.img" alt="" />
      <span> {{ back_img.intro }} </span>
    </div>
    <div class="flex-c-c-c" style="width: 100%; height: 100px">
      <span style="color: #534036; font-size: 40px; margin-top: 40px"
        >最新动态</span
      >
      <img
        src="../assets/bl.svg"
        style="width: 64px; height: auto; margin-top: 28px"
      />
    </div>
    <div
      class="flex-r-b-s"
      style="
        margin: 50px 0;
        flex-wrap: wrap !important;
        padding: 0 calc(50% - 600px);
      "
      v-if="is_list"
    >
      <div
        style="width: 570px; height: 360px; border-radius: 10px"
        v-for="(v, i) in list"
        :key="i"
        class="divs_fald cur"
        @click="routers_fn(v.id)"
      >
        <img :src="'http://api.xizangshenhouyaoye.com/' + v.img" />
        <div class="bottom_div">
          <p style="font-size: 18px; color: #ffffff">{{ v.createdate }}</p>
          <p style="font-size: 32px; color: #ffffff; line-height: 60px">
            {{ v.title }}
          </p>
          <p style="font-size: 14px; color: #ffffff">{{ v.intro }}</p>
        </div>
      </div>
    </div>
    <div class="flex-c-c-c" style="width: 100%; height: auto" v-else>
      <div style="width: 1200px; height: auto">
        <div
          v-for="(v, i) in list.data"
          :key="i"
          style="width: 100%; height: 70px; border-bottom: 2px solid #bdbbbb"
          class="flex-r-b-c cur"
          @click="routers_fn(v.id)"
        >
          <span style="color: #907a6e; font-size: 14px">{{ v.title }}</span>
          <span style="color: #907a6e; font-size: 14px">{{
            v.createdate
          }}</span>
        </div>
      </div>
    </div>
    <div
      class="flex-c-c-c"
      v-if="is_list"
      style="width: 100%; height: auto; justify-content: flex-end !important"
    >
      <div class="divs_router_link_hover">
        <img src="../assets/td.svg" style="width: 56px; height: auto" />
        <span
          style="font-size: 40px; color: #534036"
          class="cur"
          @click="genduo"
        >
          更多动态
        </span>
      </div>
    </div>
    <div
      class="flex-c-c-c"
      style="width: 100%; height: 100px; margin-top: 123px"
      v-else
    >
      <div>
        <el-pagination
          background
          layout="total, prev, pager, next, jumper"
          :total="list.total"
          :page-size="list.per_page"
          hide-on-single-page
          @current-change="fn"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { Message, MessageBox } from "element-ui";
import { formatDate } from "../components/datas.js";
export default {
  data() {
    return {
      back_img: {},
      obj: {
        page: 0,
      },
      list: {},
      is_list: true,
    };
  },
  mounted() {
    let headers = {
      token: this.$md5(this.$key + this.$dataTime()),
      rtimes: this.$dataTime(),
      btype: "news",
    };
    this.$axios
      .post(this.$base + "/Index/getBg", headers)
      .then((res) => {
        if (res.data.code == 2000) {
          this.back_img = res.data.data;
        } else {
          Message.error(res.data.msg);
        }
        console.log(res);
      })
      .catch(function (error) {
        Message.error(error.message);
      });
    headers.title = "news";
    this.$axios
      .post(this.$base + "/Index/getWebInfo", headers)
      .then((res) => {
        if (res.data.code == 2000) {
          var link =
            document.querySelector("link[rel*='icon']") ||
            document.createElement("link");
          link.type = "image/x-icon";
          link.rel = "shortcut icon";
          link.href = res.data.data.ico;
          document.title = res.data.data.web_title;
          document.getElementsByTagName("head")[0].appendChild(link);
        } else {
          Message.error(res.data.msg);
        }
        console.log(res);
      })
      .catch(function (error) {
        Message.error(error.message);
      });
    this.qingqiu();
  },
  methods: {
    routers_fn(id) {
      this.$router.push(`/details?type=1&id=${id}`);
    },
    fn(el) {
      this.obj.page = el;
      this.list_fn(this.obj.page);
    },
    genduo() {
      this.obj.page = this.obj.page + 1;
      this.is_list = false;
      this.list_fn(this.obj.page);
    },
    list_fn(page) {
      let headers = {
        token: this.$md5(this.$key + this.$dataTime()),
        rtimes: this.$dataTime(),
        page: this.obj.page,
      };
      this.$axios
        .post(this.$base + "/News/newsLists", headers)
        .then((res) => {
          if (res.data.code == 2000) {
            this.list = res.data.data;
          } else {
            Message.error(res.data.msg);
          }
          console.log(res);
        })
        .catch(function (error) {
          Message.error(error.message);
        });
    },
    data_fn(time, ges) {
      return formatDate(new Date(Number(time)), ges);
    },
    qingqiu() {
      let headers = {
        token: this.$md5(this.$key + this.$dataTime()),
        rtimes: this.$dataTime(),
      };
      this.$axios
        .post(this.$base + "/News/newsNow", headers)
        .then((res) => {
          if (res.data.code == 2000) {
            console.log(res.data.data);
            this.list = res.data.data;
          } else {
            Message.error(res.data.msg);
          }
          console.log(res);
        })
        .catch(function (error) {
          Message.error(error.message);
        });
    },
  },
};
</script>

<style lang="less" scoped>
.img_top {
  width: 100%;
  height: 500px;
  overflow: hidden;
  position: relative;

  img {
    width: 100%;
    height: auto;
  }

  span {
    position: absolute;
    left: 346px;
    top: 180px;
    line-height: 80px;
    font-size: 40px;
    color: #dcdcdc;
    letter-spacing: 10px;
    font-weight: 600;
  }
}

.divs_fald {
  position: relative;
  overflow: hidden;

  img {
    width: 570px;
    height: auto;
    transition: width 2s, height 2s;
  }

  .bottom_div {
    position: absolute;
    width: 520px;
    height: 280px;
    bottom: 0;
    left: 0;
    padding-left: 50px;
    padding-bottom: 80px;
    opacity: 0;
    transition: opacity 2s;
    background-color: #00000033;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: end;
  }
}

.divs_fald:hover {
  img {
    width: 650px;
    height: auto;
  }

  .bottom_div {
    opacity: 1;
  }
}

.divs_router_link_hover {
  position: relative;
  margin: 150px 0px;

  img {
    position: absolute;
    transition: top 2s;
    top: -50px;
    left: calc(50% - 28px);
  }
}

@keyframes example {
  50% {
    top: -150px;
  }

  100% {
    top: -50px;
  }
}

.divs_router_link_hover:hover {
  span {
    color: #86633a !important;
  }

  img {
    top: -100px;
  }
}
</style>
